<template>
  <div class="app-container">
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8" :xs="24">
          <div style="display: flex;justify-content: center;margin-bottom: 10px;">
            <el-input placeholder="搜索分类" size="small" />
            <el-button type="primary" style="margin-left: 10px;" size="small" class="addBtn" @click="dd"><i
              class="el-icon-plus"
            /> 添加分类</el-button>
          </div>
          <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />

        </el-col>

        <el-col :span="16" :xs="24">
          <div style="display: flex;margin-bottom: 10px;">
            <el-button type="success" size="small" class="addBtn">上传图片</el-button>
            <el-button type="danger" disabled="" size="small" class="addBtn">删除图片</el-button>

            <el-input placeholder="请输入图片名称" size="small" class="selWidth">

              <el-button slot="append" type="success" icon="el-icon-search" size="small" />

            </el-input>
            <el-select v-model="value" size="small" placeholder="图片移动至" class="selWidth">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>

          </div>

        </el-col>

      </el-row>

    </el-card>

  </div>
</template>

<script>
// import {
//   index_test
// } from '@/api/index'

export default {
  data() {
    return {

      data: [{
        label: '一级 1'
      },
      {
        label: '一级 1'
      },
      {
        label: '一级 1'
      },
      {
        label: '一级 1'
      },
      {
        label: '一级 1'
      },
      {
        label: '一级 1'
      }
      ],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      value: ''

    }
  },
  created() {

  },

  methods: {
    handleNodeClick(data) {
      console.log(data)
    },
    // dd(){
    //   this.$modalForm(index_test()).then(() => this.getList())
    // },
    getList() {
      console.log('调用成功！')
    }
  }
}
</script>
<style lang="scss" scoped>
  .selWidth {
    width: 200px;
    margin-left: 20px;
  }

  .input-with-select .el-input-group__append {
    background-color: red;
  }
</style>
